<template>
    <!-- <div class="editor-wrapper" style="border: 1px solid #ccc;"> -->
    <div  style="border: 1px solid #ccc;">
        <Toolbar id="toolbar-container" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor id="editor-container" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onChange="handleChange" @onCreated="handleCreated" />

    </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted,watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { useVModel } from "@vueuse/core";
const props = defineProps(['modelValue']);
 console.log('modevalue>>>',props.modelValue)
const emit = defineEmits(["update:modelValue"]);
const modelValue = useVModel(props, "modelValue", emit);
console.log('modevalue>>>',modelValue)
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// const mode = ref("default"); // 编辑器模式
const mode = ref("simple"); // 编辑器模式
const toolbarConfig = ref({}); // 工具条配置
//编辑器配置
const editorConfig = {
    placeholder: '请输入内容...',
    autoFocus: false,
    MENU_CONF: {
        uploadImage: {
            // 自定义图片上传
            async customUpload(file, insertFn) {
                // uploadFileApi(file).then((response) => {
                //   const url = response.data.url;
                //   insertFn(url);
                // });
            },
        },
    },
}
// 内容 HTML
const valueHtml = ref('')

// // // 模拟 ajax 异步获取内容
onMounted(() => {
    // console.log(modelValue,'<<<mode>>>')
    setTimeout(() => {
        valueHtml.value = modelValue.value
    }, 100)
})

watch(modelValue,(newVal,oldVal)=>{
    console.log(newVal,oldVal)
     valueHtml.value = newVal
    
})
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
function handleChange(editor) {
    // modelValue.value = editor.getHtml();
    modelValue.value = editor.getText();
}



</script>    
<style>
.w-e-text-container {
  height: 310px !important; /*!important是重点，因为原div是行内样式设置的高度300px*/
}
</style>